<template>
	<view class="content">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view>
		<view class="options">
			<view :class="index==optionIndex?'option action':'option'" @click="optionIndexFn(index)"
				v-for="(item,index) in option" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="inputLay">
			<uni-easyinput trim="all" :styles="styles" :placeholderStyle="placeholderStyle" primaryColor="#FF9BA7"
				placeholder="搜索我的关注" v-model="value1" prefixIcon="search"
				confirmType="search" @confirm="resetList" @clear="resetList"
				>

			</uni-easyinput>
		</view>
		<scroll-view style="height:calc(100vh - 400rpx); " :scroll-top="scrollTop" scroll-y="true"
			refresher-enabled="true" @scroll="scroll" :refresher-triggered="triggered" :refresher-threshold="100"
			refresher-background="#F8F2F6" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolower">

			<view class="cardWrap">
				<noData v-if="machinesList.length === 0 && !loading"></noData>
				<template v-else>
					<view :class="item.has_new==1?'cardItem hasNew':'cardItem'" v-for="(item,index) in machinesList" :key="index">
						<cardListItem
						:avatar="item.avatar"
						:title="item.name"
						>
							<template #priceTip>
								<view class="priceTip">新品上架</view>
							</template>
							<template #itemRightBox>
								<view class="bntBox">
									<view class="BntItem again" @click="linkUrl('/pages/gashaponMachine/gashaponMachine'+`?shopId=${item.id}`)">
										去抽一发
									</view>
									<view class="BntItem follow" @click="shopsFollow(item)">
										<uni-icons type="bars" class="barsIcon" color="#fff" size="14"></uni-icons>
										{{item.is_followed==1?'已关注':'未关注'}}
									</view>
								</view>
							</template>
						</cardListItem>
					</view>
					<!-- 使用uni-load-more组件显示加载状态 -->
					<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'"
						iconType="auto"></uni-load-more>

				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '我的关注',
				styles: {
					backgroundColor: " #F2F2F2",
					color: '#343434',
					borderColor: '#F2F2F2',
				},
				placeholderStyle: "color:#B6B6B6;font-size:21rpx",
				value1: '',
				option: [{
					name: '全部关注',

				}, {
					name: '最近常逛',

				}],
				optionIndex: 0,
				orderType:'follow',
				triggered: false,
				checked: true,

				triggered: false,
				_freshing: false,
				machinesList: [],
				page: 1, // 当前页码
				page_size: 10, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false // 是否没有更多数据
			}
		},
		onLoad() {
		
		},
		async onShow() {
			await this.$onLaunched;
			this.resetList()
		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: "给你分享了一份宝藏，快进来看看～",
		// 		path: '/pages/index/index',
		// 		imageUrl: '../../static/share.png'
		// 	};
		// },
		methods: {
			linkUrl(url) {
				uni.navigateTo({
					url
				})
			},
			
			// 仅在输入框失去焦点或用户按下回车时触发
changeInputFn(){
	this.resetList()
},
clearInput(){
	this.resetList()
},
			optionIndexFn(index) {
				
				this.optionIndex = index;
				if(this.optionIndex==0){
					this.orderType = 'follow';
				}else{
					this.orderType = 'view';
				}
				this.resetList()
			},
			//自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log("onpulling", e);
				// this.page = 1;
				// this.noMoreData = false;
				// this.getUsersCollectingListFn();
			},
			// 自定义下拉刷新被触发	
			onRefresh() {
				console.log("onRefresh");
				let that = this;
				if (this._freshing) return;
				// 1. 设置刷新状态
				this._freshing = true;
				this.triggered = true;
				// 2. 重置分页参数
				// 3. 重新加载数据
				this.resetList();
				// 4. 无论成功失败，2秒后复位刷新状态
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000);
			},
			// 自定义下拉刷新被复位	
			onRestore() {
				this.triggered = false;
				this._freshing = false;
				// this.triggered = false // 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件	
			scrolltolower: function(e) {
				console.log(e);
				// 如果没有更多数据或正在加载，则返回
				if (this.noMoreData || this.loading) return

				// 页码增加并获取下一页数据
				this.page++
				this.getUsersCollectingListFn()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部，目前没用，感觉可以优化流程
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.getUsersCollectingListFn()
			},
			// 用户-关注列表
			getUsersCollectingListFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/users/collecting', {
						page: this.page,
						page_size: this.page_size,
						keyword: this.value1,
						order:this.orderType//全部关注=follow,最近常逛=view
						// machine_type: this.optionIndex,
						// type: this.urlType,
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.machinesList = data.shops || []
							} else {
								// 后续页，合并数据
								this.machinesList = [...this.machinesList, ...(data.shops || [])]
							}

							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.machinesList.length >= this.total
							// this.machinesList = res.data.list;

this.machinesList.forEach(item=>{
	item.is_followed=1
})
							// 把下拉状态复位
							this.triggered = false;
							this._freshing = false;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
// 关注
			shopsFollow(item) {
				this.$http('/v1/shops/follow', {
					"shop_id": Number(item.id),
					"follow": item.is_followed==1?0:1, //// 0=取消关注, 1=关注
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						item.is_followed=0
						this.$forceUpdate()
						// this.getShopsDetailFn()
					} else {}
					this.$showToast(res.msg)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.options {
		@include flexLayout(center, center);
		margin: 20upx auto 48upx;

		.option {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 30rpx;
			color: #A7A7A7;
			line-height: 40rpx;
			position: relative;
			transition: color .5s;

			&:after {
				content: '';
				width: 0;
				height: 6rpx;
				background: none;
				border-radius: 4rpx;
				@include positionCenter;
				top: 54upx;
				transition: width .5s;
			}

			&+.option {
				margin-left: 196upx;
			}
		}

		.action {
			color: #FE97B4;

			&:after {
				content: '';
				width: 115rpx;
				background: #FE95B3;
			}
		}
	}

	::v-deep .inputLay {
		width: 678upx;
		margin: 0 auto 56upx;

		.is-input-border {
			border-radius: 30upx;
		}

		.uni-easyinput__content-input {
			height: 56upx;
		}
	}

	.cardWrap {
		padding-left: 42upx;

		::v-deep .cardItem {
			margin-bottom: 22upx;
			
			.priceTip {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 22rpx;
				color: #F777A9;
				line-height: 32rpx;
				text-align: center;
				margin-top: 20upx;
				width: 102rpx;
				height: 36rpx;
				background: #FFE9E9;
				border-radius: 4rpx;
				opacity: 0;
			}
			.priceTxt{
				display: none
			}
			.bntBox {
				@include flexLayout(center, center);
				padding-right: 30upx;

				.BntItem {
					width: 124rpx;
					height: 48rpx;
					background: #DAF3F6;
					border-radius: 26rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 48upx;

					&+.BntItem {
						margin-left: 20upx;
					}
				}

				.again {
					background: #DAF3F6;
					color: #4EBBA7;
				}

				.follow {
					@include flexLayout(center, center);
					background: linear-gradient(90deg, #FFC1D2 0%, #FE94B2 100%);
					color: #FFFFFF;

					.barsIcon {
						margin-right: 10upx;
					}
				}
			}
		}
		::v-deep .hasNew{
			.cardImg{
				border: 2upx solid #FFB2B2;
				position: relative;
				&::after{
					content: '新';
					position: absolute;
					right: 0;
					bottom: 0;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 22rpx;
					text-align: center;
					color: #FFFFFF;
					line-height: 32rpx;
					@include setwh(28rpx,32rpx);
					background: #FFB2B2;
					border-radius: 2rpx;
				}
			}
			.priceTip{
				opacity: 1;
			}
		}
	}
</style>